/**
* Copyright (c) 2022 - present TinyVue Authors.
* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
*
* Use of this source code is governed by an MIT-style license.
*
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
*
*/

@import '../custom.less';
@import './vars.less';

@selector-prefix-cls: ~'@{css-prefix}selector';

.@{selector-prefix-cls} {
  .component-css-vars-selector();

  border: 1px solid var(--ti-selector-border-color);
  border-radius: var(--ti-selector-border-radius);
  font-size: var(--ti-selector-font-size);
  box-shadow: var(--ti-base-box-shadow);
  background: var(--ti-selector-bg-color);
  color: var(--ti-selector-text-color);
  margin-top: 2px;

  .@{css-prefix}poplist {
    li {
      min-height: var(--ti-selector-list-height);
      padding: 0 8px;
      line-height: var(--ti-selector-list-height);
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      &:hover {
        cursor: pointer;
      }

      span {
        font-size: var(--ti-selector-font-size);
      }

      .icon-check {
        font-size: var(--ti-common-font-size-2);

        &:hover {
          color: var(--ti-selector-icon-hover-text-color);
        }
      }
    }

    .@{css-prefix}divider {
      padding: 0;
    }

    &.poplist-language li {
      a,
      span {
        display: inline-block;
        width: 100%;
      }
    }
  }

  .@{css-prefix-iconfont} {
    color: var(--ti-selector-icon-color);
    margin-right: 16px;

    &.icon-checked {
      color: var(--ti-selector-selected-icon-color);
    }
  }

  .select-pre {
    background: var(--ti-selector-select-bg-color);
    color: var(--ti-selector-text-color);

    &.@{css-prefix}selected {
      background: var(--ti-selector-selected-hover-bg-color);
    }
  }

  .selector-loading {
    min-height: 100px;

    .mini-loading {
      position: absolute;
      left: 45%;
      top: 35%;
      width: 20px;
      height: 20px;
      background: url(./images/container-loading.gif) center no-repeat;
    }
  }

  .@{css-prefix}selected {
    background: var(--ti-selector-selected-hover-bg-color);
    color: #333;

    &:hover {
      background: var(--ti-selector-selected-hover-bg-color);
    }

    .icon-check {
      &:hover {
        color: var(--ti-selector-icon-hover-text-color);
      }

      &:before {
        content: '\e61f';
      }

      color: var(--ti-selector-selected-icon-color);
    }
  }

  .selector-body {
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;

    .@{css-prefix-iconfont}:first-child {
      margin-right: 16px;
    }
  }

  .@{css-prefix}tree {
    &.radio {
      & > .tree-menus {
        .tree-node {
          &.node-selected {
            > .tree-menus-link,
            > .tree-menus-link:hover,
            > .tree-menus-link .tree-node-name,
            > .tree-menus-link .tree-node-name:hover,
            > .tree-menus-link .tree-node-body:hover .tree-node-name {
              background: var(--ti-selector-selected-hover-bg-color);
            }
          }

          .tree-menus-link {
            &:hover {
              background: var(--ti-selector-select-bg-color);
            }
          }

          .tree-menus .tree-node {
            padding-left: 28px;
          }
        }
      }
    }
  }
}
